<template>
  <div
    style="text-align: center; padding-bottom: 8px; font-size: 14px; font-weight: bold; color: red"
  >
    Ratio
  </div>
  <div style="display: flex">
    <Input
      style="min-width: 220px"
      v-model:value="formState.distance"
      :addon-before="'--'"
      addon-after="mm"
    ></Input>
    <Button
      ref="buttonSave"
      id="button"
      :loading="loading"
      style="margin-left: 5px"
      @click="enterIconLoading"
    >
      <template v-if="!loading" #icon><CheckOutlined /></template>
    </Button>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  type Ref,
  watch,
  nextTick,
  onMounted,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue'
import { CheckOutlined } from '@ant-design/icons-vue'
import { Button, Input } from 'ant-design-vue'
import { yesBtnSvg, loadingBtnSvg } from '../components/const'

// const a = h(TestDistanceView, {
//           disMM: '456',
//           onOnSave: (data: { disMM: string | null }) => {
//             console.log('data  disMM', data)
//           }
//         })
// render(a, divEle)

const buttonSave = ref(null)
const loading = ref<boolean>(false)

// const nPixels = ref<string>('Pixels=')
const formState = ref<{ pixels: number; distance: string }>({ pixels: 0, distance: '' })
const props = defineProps<{
  pixelsRef: Ref<number>
}>()

watch(
  () => props.pixelsRef,
  () => {
    formState.value.pixels = props.pixelsRef.value
    console.log('watch props.pixelsRef,', props.pixelsRef)
    let px = Math.ceil(props.pixelsRef.value)
    let eles = document.getElementsByClassName('ant-input-group-addon')
    if (eles.length > 0) {
      eles[0].innerHTML = `<span style="color:red">${px}</span>&nbsp;Pixels=`
    }
    // nPixels.value = `<span>${px}</span>Pixels=`
  },
  { deep: true }
)
const emits = defineEmits<{
  (event: 'saveDistance', data: { pixels: number; distance: string }): () => void
}>()

onMounted(() => {
  // formState.value.distance = props.pixelsRef.value + ''
  // nextTick(() => {
  //   let button = document.getElementById('button')
  //   if (button) button.innerHTML = yesBtnSvg
  // })
})

onUnmounted(() => {
  console.log('onUnmounted')
})

onActivated(() => {
  console.log('onActivated')
})

onDeactivated(() => {
  console.log('onDeactivated')
})
const enterIconLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    emits('saveDistance', formState.value)
  }, 3000)
}

// defineExpose({
//   buttonSave
// })
</script>
